<!-- 主仪表盘页面 - 基于优秀项目的实践重新设计 -->
<template>
  <div class="dashboard-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <el-icon size="24"><House /></el-icon>
          欢迎使用 Vilan Admin
        </h1>
        <p class="page-subtitle">基于优秀项目实践的现代化后台管理系统</p>
      </div>
      
      <!-- 快速操作 -->
      <div class="quick-actions">
        <el-button type="primary" @click="toggleTheme">
          <el-icon>{{ isDark ? 'Sunny' : 'Moon' }}</el-icon>
          {{ isDark ? '浅色模式' : '深色模式' }}
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon primary">
            <el-icon size="24"><User /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">用户总数</div>
            <div class="stat-value">1,234</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon success">
            <el-icon size="24"><Document /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">文档数量</div>
            <div class="stat-value">856</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon warning">
            <el-icon size="24"><View /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">今日访问</div>
            <div class="stat-value">2,468</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon danger">
            <el-icon size="24"><Money /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">收入总额</div>
            <div class="stat-value">¥12,345</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 功能区域 -->
    <div class="content-grid">
      <!-- 动态布局展示 -->
      <el-card title="🚀 动态布局系统" shadow="hover" class="layout-card">
        <div class="feature-content">
          <p class="current-layout">
            当前布局：<el-tag type="primary">{{ currentLayoutName }}</el-tag>
          </p>
          
          <div class="layout-description">
            <p>基于以下优秀项目的实践：</p>
            <ul>
              <li>✅ Soybean Admin - 动态组件切换</li>
              <li>✅ Naive UI Admin - 条件渲染</li>
              <li>✅ Vue Pure Admin - 配置驱动</li>
              <li>✅ Art Design Pro - 枚举管理</li>
            </ul>
          </div>
          
          <div class="layout-actions">
            <h4>布局切换测试：</h4>
            <div class="layout-buttons">
              <el-button 
                v-for="layout in layoutModes"
                :key="layout.value"
                @click="handleLayoutSwitch(layout.value)"
                :type="currentLayoutMode === layout.value ? 'primary' : 'default'"
                :loading="switchingTo === layout.value"
                size="default"
              >
                {{ layout.label }}布局
              </el-button>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 主题控制 -->
      <el-card title="🎨 主题系统" shadow="hover">
        <div class="feature-content">
          <p>当前主题：<el-tag>{{ isDark ? '深色模式' : '浅色模式' }}</el-tag></p>
          <p>主题色：<span class="color-preview" :style="{ backgroundColor: themeColor }"></span> {{ themeColor }}</p>
          
          <div class="theme-colors">
            <div 
              v-for="(color, name) in themeColorOptions"
              :key="name"
              @click="setThemeColor(color)"
              class="color-option"
              :class="{ active: themeColor === color }"
              :style="{ backgroundColor: color }"
              :title="name"
            ></div>
          </div>
        </div>
      </el-card>

      <!-- 快速导航 -->
      <el-card title="🧭 快速导航" shadow="hover">
        <div class="feature-content">
          <div class="nav-grid">
            <div class="nav-item" @click="$router.push('/example/basic-usage')">
              <el-icon size="20"><Edit /></el-icon>
              <span>基础用法</span>
            </div>
            <div class="nav-item" @click="$router.push('/example/form-page')">
              <el-icon size="20"><EditPen /></el-icon>
              <span>表单页面</span>
            </div>
            <div class="nav-item" @click="$router.push('/example/dashboard')">
              <el-icon size="20"><DataAnalysis /></el-icon>
              <span>数据分析</span>
            </div>
            <div class="nav-item" @click="$router.push('/system/user')">
              <el-icon size="20"><UserFilled /></el-icon>
              <span>用户管理</span>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 技术信息 -->
      <el-card title="💻 技术栈信息" shadow="hover">
        <div class="feature-content">
          <div class="info-list">
            <div class="info-item">
              <span class="info-label">Vue 版本：</span>
              <span class="info-value">3.x</span>
            </div>
            <div class="info-item">
              <span class="info-label">UI 框架：</span>
              <span class="info-value">Element Plus</span>
            </div>
            <div class="info-item">
              <span class="info-label">状态管理：</span>
              <span class="info-value">Pinia</span>
            </div>
            <div class="info-item">
              <span class="info-label">CSS 框架：</span>
              <span class="info-value">UnoCSS</span>
            </div>
            <div class="info-item">
              <span class="info-label">构建工具：</span>
              <span class="info-value">Vite</span>
            </div>
            <div class="info-item">
              <span class="info-label">布局实现：</span>
              <span class="info-value">动态组件 + 响应式</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useTheme } from '@/composables/useTheme'
import { 
  House, Sunny, Moon, User, Document, View, Money,
  Edit, EditPen, DataAnalysis, UserFilled
} from '@element-plus/icons-vue'

// 主题系统
const { 
  isDark, 
  themeColor, 
  setThemeColor,
  themeColorOptions,
  toggleTheme
} = useTheme()

// 布局相关状态
const currentLayoutMode = computed(() => {
  return window.__layoutState?.currentLayoutMode?.value || 'vertical'
})

const switchingTo = ref('')

// 布局模式配置
const layoutModes = [
  { value: 'vertical', label: '垂直' },
  { value: 'horizontal', label: '水平' },
  { value: 'mixed', label: '混合' },
  { value: 'vertical-mix', label: '双列' }
]

const currentLayoutName = computed(() => {
  const layout = layoutModes.find(l => l.value === currentLayoutMode.value)
  return layout ? layout.label + '布局' : currentLayoutMode.value
})

// 布局切换处理
const handleLayoutSwitch = async (layoutMode) => {
  console.log('🎯 主页面发起布局切换:', layoutMode)
  
  if (switchingTo.value) return // 防止重复点击
  
  switchingTo.value = layoutMode
  
  try {
    // 调用全局布局切换方法
    if (window.__layoutState?.switchToLayout) {
      window.__layoutState.switchToLayout(layoutMode)
    }
    
    // 延迟重置按钮状态
    setTimeout(() => {
      switchingTo.value = ''
    }, 500)
    
  } catch (error) {
    console.error('布局切换失败:', error)
    switchingTo.value = ''
  }
}
</script>

<style scoped>
.dashboard-page {
  padding: 24px;
  background: var(--el-bg-color-page);
  min-height: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.header-content {
  flex: 1;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.page-subtitle {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-secondary);
}

.quick-actions {
  display: flex;
  gap: 12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 12px;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-icon.primary { background: var(--el-color-primary); }
.stat-icon.success { background: var(--el-color-success); }
.stat-icon.warning { background: var(--el-color-warning); }
.stat-icon.danger { background: var(--el-color-danger); }

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.feature-content {
  padding: 4px 0;
}

.layout-card {
  /* 特殊样式 */
}

.current-layout {
  margin-bottom: 16px;
  font-size: 16px;
}

.layout-description {
  margin-bottom: 20px;
}

.layout-description ul {
  margin: 8px 0;
  padding-left: 20px;
}

.layout-description li {
  margin: 4px 0;
  color: var(--el-text-color-regular);
}

.layout-actions h4 {
  margin: 0 0 12px 0;
  color: var(--el-text-color-primary);
}

.layout-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.color-preview {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--el-border-color);
  vertical-align: middle;
  margin-right: 4px;
}

.theme-colors {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.color-option {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.active {
  border-color: var(--el-text-color-primary);
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--el-fill-color-lighter);
}

.nav-item:hover {
  background: var(--el-fill-color);
  transform: translateY(-2px);
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  color: var(--el-text-color-secondary);
}

.info-value {
  color: var(--el-text-color-primary);
  font-weight: 500;
}

/* 响应式 */
@media (max-width: 768px) {
  .dashboard-page {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .quick-actions {
    justify-content: center;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .nav-grid {
    grid-template-columns: 1fr;
  }
  
  .layout-buttons {
    flex-direction: column;
  }
}
</style>
